<template>
  <div style="border: 1px solid #ccc; margin-left: 80px">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      v-model="html"
      style="height: 300px; overflow-y: hidden"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @input="change"
    />
  </div>
</template>
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// import { DomEditor } from '@wangeditor/editor'

export default Vue.extend({
  components: { Editor, Toolbar },
  props: ['value'],
  data () {
    return {
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default' // or 'simple'
    }
  },
  methods: {
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      // const toolbar = DomEditor.getToolbar(editor)

      // const curToolbarConfig = toolbar.getConfig()
      // console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组
      this.toolbarConfig.excludeKeys = [
        'headerSelect',
        'group-more-style', // 排除菜单组，写菜单组 key 的值即可
        'fullScreen',
        'redo',
        'group-image',
        'group-video'
      ]

      // 将父组件中v-model所绑定的变量传递给value，再将value赋值给编辑器的内容。
      editor.setHtml(this.value)
      // 监听value，因为数据流是向下的传递的，父组件v-model绑定的属性一变化，那么value就会变化，从而获取到最新的值，更新编辑器中的内容。
      this.$watch('value', () => {
        editor.setHtml(this.value)
      })
    },
    change (e) {
      // v-model 指令是会给此节点添加一个input事件，我们在给富文本编辑器添加一个input事件，这么做在于，当输入内容后会获取到最新的内容，通过$emit 触发 父组件v-model所添加的input事件并将最新的内容传递过去，传递过去的值默认就会赋给v-model所绑定的属性。
      this.$emit('input', this.html)
    }
  },
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
